Polar Area Chart একটি চমৎকার চার্ট টাইপ যা ডেটাকে রেডিয়াল আকারে (পোলার কোঅর্ডিনেট সিস্টেমে) উপস্থাপন করে। এটি রাডার চার্ট এর মতো দেখতে, তবে এর মধ্যে প্রতিটি আঙ্গুল বা পিলার সমান আকারের হয়, এবং তাদের আকার ডেটার মানের ভিত্তিতে পরিবর্তিত হয়। Polar Area Chart সাধারণত ভাগের তুলনা বা আঞ্চলিক বিশ্লেষণ করার জন্য ব্যবহৃত হয়।
Polar Area Chart এর ব্যবহার
Polar Area Chart সাধারণত ব্যবহার করা হয়:
- বিভিন্ন আঞ্চলিক বা ভৌগোলিক এলাকার তুলনা।
- একটি নির্দিষ্ট বিষয় বা বিভাগের মধ্যে বিভিন্ন অংশের তুলনা।
- কাস্টমার সেগমেন্টেশন বা মার্কেট শেয়ার বিশ্লেষণ।
Polar Area Chart এর বেসিক কনফিগারেশন
Chart.js এর মাধ্যমে Polar Area Chart তৈরি করার জন্য কিছু নির্দিষ্ট কনফিগারেশন প্রয়োজন হয়। এতে চার্টের ধরন, ডেটাসেট, এবং কাস্টমাইজেশন অপশন দেওয়া থাকে। নিচে একটি সাধারণ Polar Area Chart কনফিগারেশন দেওয়া হলো।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polar Area Chart Example</title>
</head>
<body>
<h1>Market Share Comparison (Polar Area Chart)</h1>
<!-- Chart.js Canvas -->
<canvas id="myPolarAreaChart" width="400" height="200"></canvas>
<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Script for Polar Area Chart -->
<script>
const ctx = document.getElementById('myPolarAreaChart').getContext('2d');
const myPolarAreaChart = new Chart(ctx, {
type: 'polarArea', // Chart type: Polar Area
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each segment
datasets: [{
label: 'Market Share', // Label for the dataset
data: [50, 40, 30, 20, 10], // Data points for each segment
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1 // Border width of the segments
}]
},
options: {
responsive: true, // Make the chart responsive
plugins: {
legend: {
position: 'top', // Position of the legend (top, bottom, left, right)
},
tooltip: {
enabled: true // Show tooltips on hover
}
}
}
});
</script>
</body>
</html>
Polar Area Chart কনফিগারেশন বিশ্লেষণ
type: 'polarArea': এটি চার্টের ধরন নির্ধারণ করে। এখানে আমরা'polarArea'টাইপ ব্যবহার করেছি, যা Polar Area Chart তৈরি করবে।data: ডেটা এবং লেবেলসেটিং:labels: চার্টের জন্য লেবেল তৈরি করা হয় (যেমন, বিভিন্ন রঙ বা ক্যাটেগরি: Red, Blue, Yellow)।datasets: এক বা একাধিক ডেটাসেট থাকতে পারে, যেখানে ডেটা পয়েন্ট (যেমন মার্কেট শেয়ার) এবং আঙ্গুলের রঙ নির্ধারণ করা হয়।data: এই অংশে প্রতিটি সেগমেন্টের মান (যেমন মার্কেট শেয়ার বা অন্যান্য ডেটা) প্রদান করা হয়।backgroundColor: প্রতিটি সেগমেন্টের ব্যাকগ্রাউন্ড কালার।borderColor: সেগমেন্টগুলোর বর্ডার কালার।borderWidth: সেগমেন্টের বর্ডারের প্রস্থ।
options: চার্টের কাস্টমাইজেশন অপশন:responsive: true: চার্টটি স্ক্রীনের আকার অনুযায়ী রেসপন্সিভ হবে।plugins: এটি লেজেন্ড এবং টুলটিপ কনফিগার করতে ব্যবহৃত হয়:legend: লেজেন্ডটি কিভাবে প্রদর্শিত হবে তা কনফিগার করা হয়।tooltip: টুলটিপগুলো হোভার করার সময় প্রদর্শিত হবে।
Polar Area Chart এর কাস্টমাইজেশন
Chart.js এর Polar Area Chart অনেকটা কাস্টমাইজ করা যায়। নিচে কিছু কাস্টমাইজেশন উপায় দেওয়া হলো:
- আঙ্গুলের আকার পরিবর্তন: Polar Area Chart এর আঙ্গুলগুলোর আকার ডেটার মান অনুসারে পরিবর্তিত হয়। যদি আপনি আঙ্গুলের আকার নিয়ন্ত্রণ করতে চান, তবে
scaleঅপশন ব্যবহার করতে পারেন। - রঙ পরিবর্তন: প্রতিটি সেগমেন্টের ব্যাকগ্রাউন্ড ও বর্ডার রঙ পরিবর্তন করা যেতে পারে।
- লেজেন্ড পজিশন পরিবর্তন: লেজেন্ডের অবস্থান উপরের, নীচের বা ডানদিকে পরিবর্তন করা যায়।
- অ্যানিমেশন সেটিংস: চার্টের অ্যানিমেশন সময়কাল এবং এর ধরন কাস্টমাইজ করা যায়।
Polar Area Chart ব্যবহার কেস
Polar Area Chart সাধারণত তখন ব্যবহার করা হয় যখন ডেটার বিভিন্ন ভাগ বা সেগমেন্টের তুলনা করতে হয়। এটি বিশেষ করে মার্কেট শেয়ার, জনসংখ্যা বিতরণ, এবং বিভিন্ন বিভাগের তুলনায় উপকারী হতে পারে।
উদাহরণ ব্যবহার:
- মার্কেট শেয়ার: বিভিন্ন কোম্পানির মার্কেট শেয়ার তুলনা।
- জনসংখ্যার বিভাজন: একটি দেশের জনগণের বিভাজন (পুরুষ, নারী, শিশু, প্রাপ্তবয়স্ক ইত্যাদি)।
- কাস্টমার সেগমেন্টেশন: কাস্টমারদের বিভিন্ন বিভাগে বিভক্ত করে তাদের শেয়ার দেখতে।
সারাংশ
Polar Area Chart Chart.js এর একটি শক্তিশালী চার্ট টাইপ, যা ডেটাকে রেডিয়াল আকারে দেখাতে সাহায্য করে। এটি বিভাগ বা সেগমেন্টের তুলনা এবং বিশ্লেষণের জন্য খুবই কার্যকর। আপনিও সহজেই Chart.js দিয়ে Polar Area Chart তৈরি করতে পারেন এবং প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।
Polar Area Chart একটি বিশেষ ধরনের চার্ট যা ডেটাকে পোলার কোঅর্ডিনেট সিস্টেমে প্রদর্শন করে। এটি সাধারণত ব্যবহৃত হয় যখন আপনি একাধিক ভিন্ন ভিন্ন মানের পার্থক্য দেখাতে চান, যেখানে প্রতিটি সেগমেন্ট একটি নির্দিষ্ট ডেটা পয়েন্টের প্রতিনিধিত্ব করে। Polar Area Chart সাধারণত সেগমেন্টের আকারের মাধ্যমে ডেটার পরিমাণ বোঝায়।
Polar Area Chart এর গঠন
Polar Area Chart এর প্রতিটি সেগমেন্ট একটি ভিন্ন ভিন্ন ডেটা পয়েন্টকে প্রতিনিধিত্ব করে। এটি রাডার চার্ট এর মতো, তবে এতে কেন্দ্র থেকে সেগমেন্টগুলি প্রতিস্থাপিত হয়। Polar Area Chart সাধারণত শূন্য থেকে একটি সর্বোচ্চ মানের মধ্যে বিশ্লেষণ করার জন্য ব্যবহৃত হয়।
Polar Area Chart তৈরি করার উদাহরণ
এখানে একটি উদাহরণ দেয়া হলো যেখানে Polar Area Chart ব্যবহার করে বিভিন্ন রঙের ডেটা সেগমেন্টের মাধ্যমে ভোটের ফলাফল ভিজ্যুয়ালাইজ করা হয়েছে।
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polar Area Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Polar Area Chart Example</h1>
<canvas id="polarAreaChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
// Get the context of the canvas element
const ctx = document.getElementById('polarAreaChart').getContext('2d');
// Create the Polar Area Chart
const polarAreaChart = new Chart(ctx, {
type: 'polarArea', // Chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each segment
datasets: [{
label: 'Votes', // Label for the dataset
data: [15, 25, 10, 30, 20], // Data for each segment (percentage or count)
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // Red
'rgba(54, 162, 235, 0.2)', // Blue
'rgba(255, 206, 86, 0.2)', // Yellow
'rgba(75, 192, 192, 0.2)', // Green
'rgba(153, 102, 255, 0.2)' // Purple
],
borderColor: [
'rgba(255, 99, 132, 1)', // Red border
'rgba(54, 162, 235, 1)', // Blue border
'rgba(255, 206, 86, 1)', // Yellow border
'rgba(75, 192, 192, 1)', // Green border
'rgba(153, 102, 255, 1)' // Purple border
],
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
plugins: {
legend: {
position: 'top', // Legend position
display: true // Display the legend
}
}
}
});
বর্ণনা:
type: 'polarArea': এটি Polar Area Chart তৈরি করার জন্য Chart.js এর মধ্যে একটি চার্ট টাইপ।polarAreaচার্টে, প্রতিটি সেগমেন্টের আকার তার ডেটা ভ্যালু অনুযায়ী পরিবর্তিত হয়।labels: এই অ্যারেটি X-অক্ষের লেবেল হিসেবে কাজ করে, প্রতিটি সেগমেন্টের নাম প্রদান করে। এখানে, ‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, এবং ‘Purple’ নির্বাচিত হয়েছে।data: এখানে প্রতিটি সেগমেন্টের মানের জন্য ডেটা প্রদান করা হয়েছে, যেমন 15, 25, 10, 30, এবং 20, যা সেগমেন্টের আকার নির্ধারণ করবে।backgroundColor: প্রতিটি সেগমেন্টের পটভূমি রঙ নির্ধারণ করা হয়। প্রতিটি সেগমেন্টের জন্য একটি আলাদা রঙ দেওয়া হয়েছে।borderColor: সেগমেন্টের বর্ডারের রঙ নির্ধারণ করা হয়েছে। এটি সেগমেন্টের আউটার বর্ডারকে উপস্থাপন করবে।borderWidth: সেগমেন্টের বর্ডারের প্রস্থ। এখানে প্রস্থ ১ পিক্সেল নির্ধারণ করা হয়েছে।options:responsive: এটিকেtrueকরা হলে, চার্টটি স্ক্রিন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে রিসাইজ হবে।plugins.legend: লেজেন্ড (Legend) কাস্টমাইজেশন করা হয়, যেখানে লেজেন্ডটি চার্টের উপরের দিকে প্রদর্শিত হবে।
Polar Area Chart এর ব্যবহার
Polar Area Chart সাধারণত ব্যবহৃত হয়:
- ভোটের ফলাফল: নির্বাচন বা ভোটের ফলাফল ভিজ্যুয়ালাইজ করার জন্য।
- বাজার শেয়ার বিশ্লেষণ: বিভিন্ন কোম্পানির বাজার শেয়ার তুলনা করতে।
- পরিসংখ্যান বিশ্লেষণ: কোন কোন অংশে কতটুকু অবদান রয়েছে তা প্রকাশ করতে।
সারাংশ
Polar Area Chart Chart.js এর একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ডেটা পয়েন্টের পার্থক্য দেখতে সাহায্য করে। এটি অনেক ক্ষেত্রেই ডেটার মধ্যে অংশবিশেষ তুলে ধরতে কার্যকর, বিশেষ করে যখন আপনি প্রতিটি অংশের অনুপাত বা পরিমাণ দেখতে চান। Chart.js এর সাহায্যে Polar Area Chart তৈরি করা খুবই সহজ এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য এটি একটি চমৎকার টুল।
